
 <!-- * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-10-08 17:38:46
 * @LastEditors: 赵天利 5450026+zhaotianli01@user.noreply.gitee.com
 * @LastEditTime: 2024-01-12 16:05:52
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\AnnualWork\companyDetails.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE -->

<template>
  <div class="common-details">
    <customDetailsTopbar title="企业年度重点工作完成详情" :show-close="false" flag @back="back" />
    <div class="d-scroll">
      <div class="mx-1 px-1 bg-white">
        <customTitle :is-line="true" bg-color="#3795ff" title="基本信息" />
        <div v-for="(item, index) in descList" :key="index">
          <div>
            <custom-details-item :icon="item.icon" :label="item.label" :value="item.value === '' || item.value === '-%' ? '/':item.value" />
          </div>
        </div>
        <customTitle :is-line="true" bg-color="#3795ff" title="年度重点工作完成情况" />
        <el-alert :title="`本年度重点工作共有${contentNum}项，其中集团下发${jtNum}项（已完成${jtFinishNum}项，未完成${jtUnFinishNum}项，不涉及${jtIsInvolveNum}项），企业自制定${qyNum}项（已完成${qyFinishNum}项，未完成${qyUnFinishNum}项）`" type="warning" class="mb-1" :closable="false" />

        <div class="listInner">
          <div class="common_list">
            <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToWorkInfo(item)">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ item.workContent }}
                  </div>
                  <ul>
                    <li>
                      <i class="iconfont c-text-color1">&#xe692;</i>
                      <div class="label">工作来源：</div>
                      <div class="value">{{ item.sendType === '-'?'/':item.sendType }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe685;</i>
                      <div class="label">完成期限：</div>
                      <div class="value">{{ item.workType === '-'?'/':item.workType }}</div>
                    </li>
                    <li v-if="item.item2 !== '企业自制定'">
                      <i class="iconfont c-text-color3">&#xe67a;</i>
                      <div class="label">完成情况：</div>
                      <div class="value" :class="{'text-danger':item.isFinish === '未完成','text-success':item.isFinish === '已完成'}">{{ item.isFinish === '-'?'/':item.isFinish }}</div>
                    </li>
                    <!-- v-if="item.sendType !== '企业自制定'" /-->
                    <li>
                      <i class="iconfont c-text-color4">&#xe685;</i>
                      <div class="label">完成时间：</div>
                      <div class="value">{{ item.finishTime === '-'?'/':item.finishTime }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color5">&#xe685;</i>
                      <div class="label">情况说明：</div>
                      <div class="value">{{ item.contentDesc === '-'?'/':item.contentDesc }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color6">&#xe685;</i>
                      <div class="label">附件：</div>
                      <div class="value">
                        <!-- 安全，环保，能源，消防 -->
                        <el-link v-if="Array.isArray(item.attachmentVOList)" type="primary" @click.stop="openAttachPopUp(item.attachmentVOList)">查看</el-link>
                        <!-- 碳排放-->
                        <el-link v-if="Array.isArray(item.shareAttachVos)" type="primary" @click.stop="openAttachPopUp(item.shareAttachVos)">查看</el-link>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <customLoadmore ref="customLoadmore" :page-num="formInline.pageNum" :pages="pages" @load="handlePages" />
          <attachPopUp ref="attachPopUp" />
        </div>
      </div>
      <van-popup
        v-model="show"
        get-container="body"
        position="right"
        :style="{ width: '100%', height: '100%', backgroundColor: '#e6edf5' }"
        closeable
        close-icon="arrow-left"
        close-icon-position="top-left"
        lock-scroll
        safe-area-inset-bottom
        close-on-popstate
        class="custom-van-pop"
      >
        <div class="pop-title">企业年度重点工作完成详情</div>
        <div class="pop-vertical-flex">
          <div class="pop-content">
            <work-info v-if="show" :desc-list="Infodes" />
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import commonList from '@/assets/mixin/commonList'
import {
  aqYearWorkCompanyList,
  aqYearWorkWorkRecordList,
  hbYearWorkCompanyList,
  hbYearWorkWorkRecordList,
  nyYearWorkCompanyList,
  nyYearWorkWorkRecordList,
  tpfYearWorkCompanyList,
  tpfYearWorkWorkRecordList,
  xfYearWorkCompanyList,
  xfYearWorkWorkRecordList
} from '@/api/commonPage/AnnualWork'
import workInfo from './workInfo.vue'
import CustomDetailsTopbar from '@/components/globals/custom-details-topbar.vue'
import CustomTitle from '@/components/globals/custom-title.vue'
import CustomDetailsItem from '@/components/globals/custom-details-item.vue'

export default {
  components: { CustomDetailsItem, CustomTitle, CustomDetailsTopbar, workInfo },
  mixins: [commonList],
  data() {
    return {
      descList: [
        { label: '企业名称', value: '', fieldName: 'companyName', icon: '&#xe725;' },
        { label: '所属年份', value: '', fieldName: 'dataYear', icon: '&#xe8d5;' },
        { label: '集团下发重点工作完成进度', value: '', fieldName: 'jtFinishSchedule', icon: '&#xe64d;' },
        { label: '企业自制定重点工作完成进度', value: '', fieldName: 'qyFinishSchedule', icon: '&#xe64d;' }
      ],
      listData: [],
      formInline: {
        companyId: null,
        workId: null,
        pageNum: 1,
        pageSize: 10
      },
      contentNum: 0,
      jtNum: 0,
      jtFinishNum: 0,
      jtUnFinishNum: 0,
      jtIsInvolveNum: 0,
      jtFinishSchedule: 0,
      qyNum: 0,
      qyFinishNum: 0,
      qyUnFinishNum: 0,
      qyIsInvolveNum: 0,
      pages: 0,
      current: '',
      companyName: '',
      dataYear: '',
      show: false,
      Infodes: ''
    }
  },
  mounted() {
    const { current, workId, companyId, companyName, dataYear } = this.$route.query
    this.current = current || ''
    this.formInline.workId = workId || null
    this.formInline.companyId = companyId || null
    this.companyName = companyName || ''
    this.dataYear = dataYear || ''
    this.$nextTick(() => {
      this.getCompanyList()
      this.getWorkRecordList()
    })
  },
  methods: {
    // 分页
    handlePages(value) {
      this.formInline.pageNum = value
      this.getWorkRecordList()
    },
    // 获取企业基本信息
    async getCompanyList() {
      const api = {
        安全生产: aqYearWorkCompanyList,
        环保管理: hbYearWorkCompanyList,
        消防管理: xfYearWorkCompanyList,
        能源管理: nyYearWorkCompanyList,
        碳排放管理: tpfYearWorkCompanyList
      }
      const { status, data } = await api[this.current]({
        pageNum: 1,
        pageSize: 10,
        workId: this.formInline.workId,
        companyName: this.companyName,
        dataYear: this.dataYear
      })
      if (status === 0 && data) {
        if (data.list.length > 0) {
          this.descList.forEach((v) => {
            if (v.fieldName === 'jtFinishSchedule' || v.fieldName === 'qyFinishSchedule') {
              v.value = data.list[0][v.fieldName] !== '' ? data.list[0][v.fieldName] + '%' : '/'
            } else {
              v.value = data.list[0][v.fieldName] !== '' ? data.list[0][v.fieldName].toString() : '/'
            }
          })
          this.contentNum = data.list[0].contentNum
          this.jtNum = data.list[0].jtNum
          this.jtFinishNum = data.list[0].jtFinishNum
          this.jtUnFinishNum = data.list[0].jtUnFinishNum
          this.jtIsInvolveNum = data.list[0].jtIsInvolveNum
          this.jtFinishSchedule = data.list[0].jtFinishSchedule
          this.qyNum = data.list[0].qyNum
          this.qyFinishNum = data.list[0].qyFinishNum
          this.qyUnFinishNum = data.list[0].qyUnFinishNum
          this.qyIsInvolveNum = data.list[0].qyIsInvolveNum
        }
      }
    },
    // 获取列表数据
    async getWorkRecordList() {
      this.$refs.customLoadmore.loadStatus = true
      this.layout.showLoading()
      const api = {
        安全生产: aqYearWorkWorkRecordList,
        环保管理: hbYearWorkWorkRecordList,
        消防管理: xfYearWorkWorkRecordList,
        能源管理: nyYearWorkWorkRecordList,
        碳排放管理: tpfYearWorkWorkRecordList
      }
      const { status, data } = await api[this.current](this.formInline)
      if (status === 0 && data) {
        this.listData = this.listData.concat(data.list)
        this.total = data.total
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      this.layout.hideLoading()
    },
    // 跳转工作内容详情
    goToWorkInfo(item) {
      this.show = true
      this.Infodes = item
    },
    // 返回企业完成情况
    back() {
      this.$router.push({
        path: '/staging/AnnualWorkCompany',
        query: { current: this.current, workId: this.formInline.workId }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

.custom-van-pop {
  background: url("~@/assets/images/wapper.png") no-repeat;
  .pop-title {
    color: #fff;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.46667rem;
    font-weight: bold;
  }
  .pop-content {
    background-color: #fff;
    margin: 0 0.25rem ;
  }
  ::v-deep .van-popup__close-icon {
    color: #fff;
  }
}
</style>
